<template>
  <div class="home">
    <!--搜索框-->
    <van-search class="van-search"
                :v-model="value"
                shape="round"
                placeholder="请输入搜索关键词"
                input-align="center"
                right-icon="scan"
    />

    <!-- 宫格快捷导航入口 -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item v-for="(item, i) in homeItems" :key="i" :icon="item.img" :text="item.title"
                     :to="{ name: item.routeName }" :badge="item.count"/>
    </van-grid>

    <!-- 轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, i) in carouselList" :key="i" @click="onToProductDetail(item.product_id)"><img
          :src=" item.img" width="100%"/></van-swipe-item>
    </van-swipe>

    <!-- 首页推荐 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item title="相聚618 欢乐迎好礼" name="1">{{ text }}</van-collapse-item>
    </van-collapse>
    <home-product :dataList="recommendedItems"></home-product>

    <van-collapse v-model="activeNames">
      <van-collapse-item title="大牌直播 好礼巨献" name="1">{{ text }}</van-collapse-item>
    </van-collapse>
    <NutLive col="2" :data="data" type="normal"></NutLive>
  </div>
</template>

<script>
// @ is an alias to /src
//1.导入封装后的接口
import {getHomeDataAPI} from '@/api/home.js';
import HomeProduct from "./components/HomeProduct.vue"

export default {
  name: 'Home',
  components: {HomeProduct},
  data() {
    return {
      data: [],
      value: "",
      activeNames: ['1'],
      text: "一年一度的618 感恩庆典 大量优惠",
      carouselList: [], //轮播数据
      recommendedItems: [],//推荐商品项   gift-o
      newArrialItems: [],//新品上架  point-gift-o
      topSaleItems: [],//单品排行  gem-o
      homeItems: [
        {
          title: '饿了吗',
          img: require('@/assets/images/menu1.png'),
          routeName: 'working'
        },
        {
          title: '百亿补贴',
          img: require('@/assets/images/menu2.png'),
          routeName: 'working'
        },
        {
          title: '菜鸟',
          img: require('@/assets/images/menu3.png'),
          routeName: 'product'
        },
        {
          title: '小美庭院',
          img: require('@/assets/images/menu4.png'),
          routeName: 'working',
          count: 9
        },
        {
          title: '天猫榜单',
          img: require('@/assets/images/menu5.png'),
          routeName: 'working'
        },
        {
          title: '淘工厂',
          img: require('@/assets/images/menu6.png'),
          routeName: 'working'
        },
        {
          title: '摇现金',
          img: require('@/assets/images/menu7.png'),
          routeName: 'working'
        },
        {
          title: '领淘金币',
          img: require('@/assets/images/menu8.png'),
          routeName: 'working'
        },
        {
          title: '淘鲜达',
          img: require('@/assets/images/menu9.png'),
          routeName: 'working'
        },
        {
          title: '全部频道',
          img: require('@/assets/images/menu10.png'),
          routeName: 'working'
        }
      ]
    };
  },

  mounted() {
    this.data = [
      {
        indexImage:
            'https://pica.zhimg.com/v2-3f8a736996c31ccbb808bfcd19f3ec15_r.webp?source=172ae18b&consumer=ZHI_MENG',
        status: 0,
        desc: '快来围观',
        title: '618好物分享中..'
      },
      {
        indexImage:
            'https://p0.ssl.qhimg.com/t0117bb533a6747933f.png?&w=96&h=54&rs=2&qlt=100',
        status: 1,
        desc: '618巨惠',
        title: '618大量优惠'
      }
    ]
  },


  //在生命周期函数中调用API接口从后端取业务数据
  created() {
    //使用封装的方法
    getHomeDataAPI().then(result => {
      console.log(result);
      this.carouselList = result.data;//轮播数据
      this.recommendedItems = result.data; //推荐商品项
      console.log(this.recommendedItems)
    });
  },
  updated() {

  },


  methods: {
    GetHostData: function () {
      this.$router.go(0)
    },
    //跳转到商品明细页面
    onToProductDetail(id) {
      this.$router.push({name: 'productDetail', params: {id}});
    }
  }
};
</script>

<style lang="less" scoped="scoped">

/deep/ .van-field__control {
  font-size: 20px;
}

/deep/ .van-grid-item__text {
  color: rgba(128, 128, 128, 0.9);
  font-size: 16px;
}

/deep/ .van-cell {
  font-size: 20px;
  background: white !important;
}

/deep/ .van-cell__title {
  text-align: center;
}

/deep/ .van-collapse-item__content {
  text-align: center;
  font-size: 16px;
}
</style>
